<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魔豆素材网</title>
		<link rel="stylesheet" type="text/css" href="./css/common.css"/>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/danye.css"/>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
		<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="header-inner w-m clearfix">
				<div class="logo"><img src="img/logo.png" alt=""></div>
				<ul class="nav clearfix" style="margin-left: 15px;">				
					<li><a href="modou.html">首页</a></li>
					<li><a href="tuku.html" class="active">原创图库</a></li>
					<li><a href="shouhui.html">手绘定制</a></li>
				</ul>
				<div class="search">
					<span class="fenlei">分类<img src="img/xiala.png" alt="">
					<ul class="xiala">
						<li>梦幻小说</li>
						<li>都市小说</li>
						<li>男频封面</li>
						<li>素锦封面</li>
						<li>校园封面</li>
						<li>梦幻小说</li>
					</ul>
					</span>					
					<span class="text">
						<!-- <span>小说首页<i class="layui-icon layui-icon-close" onclick="close()"></i></span> -->
						<input type="text">
					</span>
					<button class="button"><img src="img/search.png" ></button>
				</div>
				<!-- 已登录 -->
				<div class="user clearfix" style="display: none;">
					<img src="img/tx.png" >
					<span>
						张灵灵<br/>
						<font>ID:235342</font>
					</span>
				</div>
				<!-- 未登录 -->
				<div class="reg">
					<a href="login-register.html">登录</a> / <a href="login-register.html">注册</a>
				</div>
			</div>			
		</header>
		<div class="wrap">
			<div class="w-m">
				<!-- 面包屑 -->
				<div class="nav">
					<span class="layui-breadcrumb" lay-separator=">">
					  <a href=""><cite>当前位置</cite></a>
					  <a href="">首页</a>
					  <a href="">原创图库</a>
					  <a href="">玄幻</a>
					  <a href="">当前素材</a>
					</span>
				</div>
				<!-- 内容一区域 -->
				<div class="list1 clearfix">
					<div class="left">
						<div class="title">
							<span class="title-l huizhang">精品</span>
							<a href="" class="title-r">马上分享>></a>
						</div>
						<img src="img/detail.png" >
					</div>
					<div class="right">
						<div class="title">
							<p>
								<span class="bianhao">编号</span>
								135625
							</p>
							<p><i class="layui-icon layui-icon-star-fill"></i></p>
						</div>
						<div class="info">
							<p>尺寸：800*1200PX</p>
							<p>文件大小：1M</p>
							<p>格式：JPG</p>
						</div>
						<div class="down">
							<a href="">
								<img src="img/down.png" >
								立即下载
							</a>
						</div>
						<div class="banquan">
							<span>版权所有：</span>
							<span>原创图片素材网已获得作者授权，有权就作品进行销售。</span>
						</div>
						<div class="shouquan">
							<span>授权方式：</span>
							<span>VRF协议</span>
						</div>
						<div class="biaoqian">
							<p>标签：</p>
							<span class="huizhang">女人</span>
							<span class="huizhang">古代言情</span>
							<span class="huizhang">单人</span>
							<span class="huizhang">红色</span>
						</div>
						<div class="shengming">
							<p>声明：</p>
							<p>本作品（含预览图）受著作权法保护，著作权及相关权利归本网站所有，未经许可任何人不得擅自使用。
							<span class="huizhang">有奖举报</span></p>
							<p>水印说明：图片水印仅用于防盗防刷，不代表其他含义。</p>
						</div>
					</div>
				</div>
				<!-- 内容二区域 -->
				<div class="list2">
					<div class="title">
						<img src="img/huangguan.png" alt="">
						<span>相关素材推荐</span>
						<a href="" class="more">更多 <i class="layui-icon layui-icon-right"></i></a>
					</div>
					<ul class="content clearfix">
						<li class="item">
							<a href=""><img src="img/pic1.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic2.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic3.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic4.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic1.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic2.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic3.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
						<li class="item">
							<a href=""><img src="img/pic4.png" alt=""></a>
							<p class="clearfix">
								<span>鸟类</span>
								<span>
									<font>收藏 99+ 人</font>
									<font>总计65张</font>
								</span>								
							</p>
							<img src="img/new.png" class="new" alt="">
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer class="footer">
			<ul class="nav">
				<li><a href="">关于我们</a></li>
				<li><a href="">友情链接</a></li>
				<li><a href="">个人会员版</a></li>
				<li><a href="">隐私协议</a></li>
				<li><a href="">服务条款</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<p class="flink">
				<a href="">联合推广 market@163.com</a>
				<a href="">友链交换 market@163.com</a>
			</p>
			<p class="ewm"><img src="img/ewm.png"></p>
			<a href="" class="beian">Copyright © 2017 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号</a>
		</footer>
		
		
		<script type="text/javascript" charset="utf-8">
			layui.use(['form', 'element','jquery','layer'], function(){
			  var form = layui.form,
				  $ = layui.$,
				  layer = layui.layer,
				  element = layui.element;
				  
				  
				  // 搜索框
				  $(".xiala li").click(function(){
					  $(".text").html('<span>'+$(this).text()+'<i class="layui-icon layui-icon-close"></i></span>');
				  })
				  
				  $(".text").on('click','.layui-icon-close',function(){
					  $(".text").html('<input type="text">');
				  })
				  
				  // 获取所搜词
				  $(".search .button").click(function(){
					  var search=$(".text span").text()||$(".text input").val();
					  if(search.length>0){
						  console.log(search)
						  window.open("search.html")
					  }else{
						  layer.tips('请输入搜索词', '.text', {tips: [3, '#00cc90'],time:1500, anim: 6});
						  return false;
					  }
				  })
			});			
		</script>
	</body>
</html>
